<div class="adduser">
    <!-- 头部 -->
    <div class="top">
        <div class="list">人员信息</div>
        <div class="right">
            <div class="btn2">
                <nz-select name="select-validate" [(ngModel)]="userDetail.status" [nzShowArrow]="false" class="status"
                    [nzCustomTemplate]="defaultTemplate">
                    <nz-option nzCustomContent nzValue="0" nzLabel="在岗">
                        <nz-badge nzStatus="processing" nzText="在岗"></nz-badge>
                    </nz-option>
                    <nz-option nzCustomContent nzValue="1" nzLabel="请假">
                        <nz-badge nzStatus="error" nzText="请假"></nz-badge>
                    </nz-option>
                    <nz-option nzCustomContent nzValue="2" nzLabel="离职">
                        <nz-badge nzStatus="default" nzText="离职"></nz-badge>
                    </nz-option>
                </nz-select>
                <ng-template #defaultTemplate let-selected>
                    <nz-badge *ngIf="userDetail.status == '0'" nzStatus="processing" class="point"
                        [nzText]="selected.nzLabel">
                    </nz-badge>
                    <nz-badge *ngIf="userDetail.status == '1'" nzStatus="error" class="point"
                        [nzText]="selected.nzLabel">
                    </nz-badge>
                    <nz-badge *ngIf="userDetail.status == '2'" nzStatus="default" class="point"
                        [nzText]="selected.nzLabel">
                    </nz-badge>
                </ng-template>
            </div>
        </div>
    </div>

    <nz-spin [nzSpinning]="waiting" class="content">
        <!-- form区域 -->
        <form nz-form [nzNoColon]="true" [formGroup]="validateForm" (ngSubmit)="submitForm()">
            <nz-form-item style="padding-top: 50px;">

                <div (click)="openConfigModal()" class="header" [ngClass]="{'nobgc':userDetail.headerPhoto}">
                    <ng-container *ngIf="!userDetail.headerPhoto">
                        <i class="iconfont icon-camera-line"> </i>
                        <div>上传头像</div>
                    </ng-container>
                    <ng-container *ngIf="userDetail.headerPhoto">
                        <div class="hover">
                            <span>上传头像</span>
                            <img [src]="userDetail.headerPhoto" />
                        </div>
                    </ng-container>
                </div>
            </nz-form-item>
            <div nz-row class="form-row">
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>
                            <span class="form-label">姓名</span>
                        </nz-form-label>
                        <nz-form-control [nzSpan]="18" [nzErrorTip]="nameErrorTpl">
                            <input nz-input placeholder="姓名" formControlName="name" />
                            <ng-template #nameErrorTpl let-control>
                                <ng-container *ngIf="control.hasError('required')"> 请输入姓名! </ng-container>
                                <ng-container *ngIf="control.hasError('pattern')">姓名不能全为空格</ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>
                            <span class="form-label">工号</span>
                        </nz-form-label>
                        <nz-form-control [nzSpan]="18" nzErrorTip="请输入你的工号">
                            <input nz-input placeholder="工号" class="cbg" formControlName="employeeNo"
                                [readOnly]="userId" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row class="form-row">
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired>
                            <span class="form-label">手机号码</span>
                        </nz-form-label>
                        <nz-form-control [nzSpan]="18" [nzErrorTip]="phoneErrorTpl">
                            <input nz-input placeholder="请输入手机号码" formControlName="phone" />
                            <ng-template #phoneErrorTpl let-control>
                                <ng-container *ngIf="control.hasError('required')">
                                    请输入你的手机号
                                </ng-container>
                                <ng-container *ngIf="control.hasError('pattern')">
                                    请输入正确手机号
                                </ng-container>
                            </ng-template>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">
                            <span class="form-label">座机号</span>
                        </nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input placeholder="座机号" formControlName="telephone" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <nz-divider class="divider"></nz-divider>
            <div nz-row class="form-row">
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">电子邮箱</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input placeholder="请输入电子邮箱" type="email" formControlName="email" />

                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired> <span class="form-label">出生日期</span></nz-form-label>
                        <nz-form-control [nzSpan]="18" nzErrorTip="请选择出生日期">
                            <nz-date-picker formControlName="birth"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row class="form-row">
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">所属单位</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <ng-container *ngIf="orgInfo">
                                <input nz-input placeholder="所属单位" class="cbg" [(ngModel)]="orgInfo.name"
                                    [ngModelOptions]="{standalone: true}" [disabled]="true" />
                            </ng-container>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">岗位级别</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <nz-select name="select-validate" formControlName="level" nzPlaceHolder="请选择岗位级别">
                                <nz-option nzValue="1" nzLabel="一级"></nz-option>
                                <nz-option nzValue="2" nzLabel="二级"></nz-option>
                                <nz-option nzValue="3" nzLabel="三级"></nz-option>
                                <nz-option nzValue="4" nzLabel="四级"></nz-option>
                                <nz-option nzValue="5" nzLabel="五级"></nz-option>
                                <nz-option nzValue="6" nzLabel="六级"></nz-option>
                                <nz-option nzValue="7" nzLabel="七级"></nz-option>
                                <nz-option nzValue="8" nzLabel="八级"></nz-option>
                                <nz-option nzValue="9" nzLabel="九级"></nz-option>
                                <nz-option nzValue="10" nzLabel="十级"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row class="form-row">
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">所属部门</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <nz-select name="select-validate" formControlName="departmentId" nzPlaceHolder="未分配">
                                <nz-option [nzValue]="item.id" [nzLabel]="item.nodeName"
                                    *ngFor="let item of departlist">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">部门负责人</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <nz-select name="select-validate" formControlName="isHeadOfDepartment" nzDisabled>
                                <nz-option [nzValue]="true" nzLabel="是"></nz-option>
                                <nz-option [nzValue]="false" nzLabel="否"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>

            <div nz-row class="form-row">
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired> <span class="form-label">入职时间</span></nz-form-label>
                        <nz-form-control [nzSpan]="18" nzErrorTip="请选择入职时间">
                            <nz-date-picker formControlName="createTime"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">转正时间</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <nz-date-picker formControlName="regularTime"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>

            <div nz-row class="form-row">
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">合同到期时间</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <nz-date-picker formControlName="dateEnd"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">职务名称</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input placeholder="请输入职务名称" class="cbg" formControlName="position" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <div nz-row class="form-row">
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">身份证号</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input placeholder="请输入身份证号" class="cbg" formControlName="idCard" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">性别</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <nz-select class="fl mr20" formControlName="gender" nzAllowClear nzPlaceHolder="性别"
                                nzShowButton="false">
                                <nz-option nzLabel="男" nzValue="man"></nz-option>
                                <nz-option nzLabel="女" nzValue="woman"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
            <nz-divider class="divider"></nz-divider>
            <div nz-row class="form-row">
                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6"> <span class="form-label">登录账号</span></nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input class="cbg" [(ngModel)]="phone" [disabled]="true"
                                [ngModelOptions]="{standalone: true}" />
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div clsss="form-col" nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6" nzRequired> <span class="form-label">登录密码</span></nz-form-label>
                        <nz-form-control [nzSpan]="18" nzErrorTip="请输入登录密码">
                            <input nz-input type="password" placeholder="请输入登录密码" formControlName="password"
                                (change)="pwdChanged()" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>

            <nz-divider class="divider"></nz-divider>

            <nz-form-item>
                <nz-form-label [nzSpan]="3">
                    <span class="form-label">证书上传</span>
                </nz-form-label>
                <div class="color">（支持jpg/png格式，文件大小不超过10M）</div>
            </nz-form-item>

            <nz-form-item>
                <nz-form-control [nzSpan]="24" [nzOffset]="3">
                    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
                        <nz-tab nzTitle="身份证">
                            <div class="tab">
                                <nz-upload class="avatar-uploader" [nzAction]="uploadService.uploadAction"
                                    nzName="avatar" nzListType="picture-card" [nzShowUploadList]="false"
                                    [nzBeforeUpload]="beforeUpload" (nzChange)="handleChange($event,'身份证')"
                                    [nzHeaders]="uploadService.headers" nzName="file" class="addupload">
                                    <ng-container class="upload">
                                        <i class="upload-icon iconfont"
                                            [ngClass]="loading ? 'icon-loading' : 'icon-add-line'"></i>
                                    </ng-container>
                                </nz-upload>
                                <div *ngIf="getImageByName('身份证').list" style="display: flex;">
                                    <div class="upfileimg" *ngFor="let imgItem of getImageByName('身份证').list">
                                        <div class="upfileimg-icon">
                                            <i class="iconfont icon-delete-bin-5-line"
                                                (click)="delFileImg('身份证',imgItem)"></i>
                                            <i class="iconfont icon-download-2-line"
                                                (click)="downloadFile(imgItem.url,imgItem.name)"></i>
                                        </div>
                                        <img [src]="imgItem.url" />
                                    </div>
                                </div>
                            </div>

                        </nz-tab>
                        <nz-tab nzTitle="学历证">
                            <div class="tab">
                                <nz-upload class="avatar-uploader" [nzAction]="uploadService.uploadAction"
                                    nzName="avatar" nzListType="picture-card" [nzShowUploadList]="false"
                                    [nzBeforeUpload]="beforeUpload" (nzChange)="handleChange($event,'学历证')"
                                    [nzHeaders]="uploadService.headers" nzName="file" class="addupload">
                                    <ng-container class="upload">
                                        <i class="upload-icon iconfont"
                                            [ngClass]="loading ? 'icon-loading' : 'icon-add-line'"></i>
                                    </ng-container>
                                </nz-upload>
                                <div *ngIf="getImageByName('学历证').list" style="display: flex;">
                                    <div class="upfileimg" *ngFor="let imgItem of getImageByName('学历证').list">
                                        <div class="upfileimg-icon">
                                            <i class="iconfont icon-delete-bin-5-line"
                                                (click)="delFileImg('学历证',imgItem)"></i>
                                            <i class="iconfont icon-download-2-line"
                                                (click)="downloadFile(imgItem.url,imgItem.name)"></i>
                                        </div>
                                        <img [src]="imgItem.url" />
                                    </div>
                                </div>
                            </div>
                        </nz-tab>
                        <nz-tab nzTitle="其他证书">
                            <div class="tab">
                                <nz-upload class="avatar-uploader" [nzAction]="uploadService.uploadAction"
                                    nzName="avatar" nzListType="picture-card" [nzShowUploadList]="false"
                                    [nzBeforeUpload]="beforeUpload" (nzChange)="handleChange($event,'其他证书')"
                                    [nzHeaders]="uploadService.headers" nzName="file" class="addupload">
                                    <ng-container class="upload">
                                        <i class="upload-icon iconfont"
                                            [ngClass]="loading ? 'icon-loading' : 'icon-add-line'"></i>
                                    </ng-container>
                                </nz-upload>
                                <div *ngIf="getImageByName('其他证书').list" style="display: flex;">
                                    <div class="upfileimg" *ngFor="let imgItem of getImageByName('其他证书').list">
                                        <div class="upfileimg-icon">
                                            <i class="iconfont icon-delete-bin-5-line"
                                                (click)="delFileImg('其他证书',imgItem)"></i>
                                            <i class="iconfont icon-download-2-line"
                                                (click)="downloadFile(imgItem.url,imgItem.name)"></i>
                                        </div>
                                        <img [src]="imgItem.url" />

                                    </div>
                                </div>
                            </div>
                        </nz-tab>
                    </nz-tabset>
                    <ng-template #extraTemplate>
                    </ng-template>
                </nz-form-control>
            </nz-form-item>

            <nz-divider class="divider"></nz-divider>

            <nz-form-item style="padding-bottom: 24px; margin: 0;">
                <nz-form-label [nzSpan]="3">其他资料</nz-form-label>
                <nz-form-control [nzSpan]="21">
                    <div class="extra-file-ctrl">
                        <nz-upload [nzAction]="uploadService.uploadAction" [nzHeaders]="uploadService.headers"
                            (nzChange)="handleChangefile($event)" class="upfile" class="historyno">
                            <button nz-button nzType="primary" nzValue="small" class="scwj"
                                *ngIf="!userDetail.imageList[3].url  " type="button">上传附件</button>
                            <div *ngIf="userDetail.imageList[3].url">{{userDetail.imageList[3].filename}}</div>
                        </nz-upload>
                        <span class="file-tip">ZIP/RAR/JPG/PNG，20M以内</span>
                    </div>
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-spin>

    <!-- 底部按钮 -->
    <div class="bottom">
        <button nz-button nzType="default" (click)="goBack()">取消</button>
        <button nz-button nzType="primary" class="bg" (click)="submitForm()">保存</button>
    </div>

</div>